<template>

    <echart :options="option" class="echarts"></echart>

</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var date = [[0.81], [0.9], [0.2], [0.1]];
export default {
  data: function() {
    return {
      option: {
        backgroundColor: "#0D2A42",
        title: [
         {
            text: "一周服务运维统计                         ",
            left: "5%",
            top: "1%",
            textStyle: {
              color: "#eedfbe",
            },
            backgroundColor: "#0a3c60"
          },
          {
            text: "工单完成率",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "11%",
            top: "75%",
            textAlign: "center",
            textBaseAlign: "middle"
          },
          {
            text: "工单响应率",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "36%",
            top: "75%",
            textAlign: "center",
            textBaseAlign: "middle"
          },
          {
            text: "紧急工单率",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "61%",
            top: "75%",
            textAlign: "center",
            textBaseAlign: "middle"
          },
          {
            text: "严重工单率",
            textStyle: {
              fontSize: 15,
              color: "#fff"
            },
            left: "86%",
            top: "75%",
            textAlign: "center",
            textBaseAlign: "middle"
          }
        ],
        series: [
          {
            type: "liquidFill",
            data: date[0],
            radius: "39%",
            // 水球颜色
            color: ["#436EEE"],
            center: ["12%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            label: {
              normal: {
                color: "white",
                insideColor: "white",
                fontSize: 20
              }
            }
          },
          {
            type: "liquidFill",
            data: date[1],
            radius: "39%",
            // 水球颜色
            color: ["#436EEE"],
            center: ["37%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            label: {
              normal: {
                color: "white",
                insideColor: "white",
                fontSize: 20
              }
            }
          },
          {
            type: "liquidFill",
            data: date[2],
            radius: "39%",
            // 水球颜色
            color: ["#436EEE"],
            center: ["62%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            label: {
              normal: {
                color: "white",
                insideColor: "white",
                fontSize: 20
              }
            }
          },
          {
            type: "liquidFill",
            data: date[3],
            radius: "39%",
            // 水球颜色
            color: ["#436EEE"],
            center: ["87%", "50%"],
            // 内图 背景色 边
            backgroundStyle: {
              color: "#0D2A42"
            },
            label: {
              normal: {
                color: "white",
                insideColor: "white",
                fontSize: 20
              }
            }
          }
        ]
      }
    };
  }
};
</script>
